import React, { Component } from 'react'
import PropTypes from 'prop-types'

import {
  Form,
  Select,
  Input
} from 'antd';

const { Option } = Select;

export default class AddForm extends Component {
  static propTypes = {
    categorys: PropTypes.array.isRequired,
    parentId: PropTypes.string.isRequired,
    setForm: PropTypes.func.isRequired
  }

  myRefAdd = React.createRef()

  componentDidMount () {
    this.props.setForm(this.myRefAdd.current)
  }

  render () {
    const { categorys, parentId } = this.props
    return (
      <Form
        name="validate_other"
        ref={this.myRefAdd}
      >
        <Form.Item
          name="parentId"
          label="父级分类"
          initialValue={parentId}
          rules={[
            {
              required: true,
              message: '请选择父级分类!',
            },
          ]}
        >
          <Select >
            <Option value="0">一级分类</Option>
            {
              categorys.map(item => {
                return <Option value={item._id} key={item._id}>{item.name}</Option>
              })
            }
          </Select>
        </Form.Item>

        <Form.Item
          label="分类名称"
          name="categoryName"
          rules={[
            {
              required: true,
              message: '请输入分类名称!',
            },
          ]}
        >
          <Input placeholder="请输入分类名称" />
        </Form.Item>
      </Form>
    )
  }
}
